<style lang="less" scoped>
@import "./Banner.less";
</style>

<template>
  <div class="mooc">
    <!-- 模糊背景 -->
    <div v-if="bk" class="bk" :style="backgroundImage"></div>
    <!-- 轮播图 -->
    <div class="wrap">
      <div class="banner">
        <!-- 左侧分类 -->
        <div class="menu-content">
          <a
            v-for="(item, i) in categoryData"
            :key="i"
            :class="{ item, active: currCat == item.title }"
            @mouseover="handleShowSub(true, item)"
            @mouseout="handleShowSub(false)"
          >
            <span>{{ item.title }}</span>
            <Icon type="md-arrow-dropright" />
          </a>
        </div>
        <!-- 分类详情 -->
        <div
          class="submenu"
          v-show="showSubMenu"
          @mouseover="handleShowSubPanel(true)"
          @mouseout="handleShowSubPanel(false)"
        >
          <div class="sub-wrap">
            <!-- 分类 -->
            <div class="innerBox">
              <div class="banner-line">
                <span :style="{ color: color }">{{ catName }}</span>
              </div>
              <div class="tag-box" :style="styleObject">
                <a
                  v-for="(item, i) in secondCat"
                  :key="i"
                  @click="clickCategory(item)"
                  >{{ item.title }}</a
                >
              </div>
            </div>
            <!-- 推荐商品 -->
            <div class="recomment-box">
              <a
                v-for="(item, i) in catRecommend"
                :key="i"
                :title="item.title"
                class="banner-card"
                @click="clickProduct(item)"
              >
                <img :src="item.picUrl" />
                <div class="card">
                  <h3 class="name">{{ item.title }}</h3>
                  <div class="price">￥{{ Number(item.price).toFixed(2) }}</div>
                  <div class="sales">销量：{{ item.sales }}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <!-- 右侧轮播图 -->
        <div class="banner-content">
          <Carousel
            @on-change="changeBanner"
            autoplay
            loop
            :radius-dot="true"
            :autoplay-speed="3500"
            :height="316"
            class="carousel"
            @on-click="clickBanner"
          >
            <CarouselItem
              v-for="(item, i) in bannerData"
              :key="i"
              style="cursor: pointer"
            >
              <img :src="item.picUrl" width="937" height="316" />
            </CarouselItem>
          </Carousel>
          <!-- 下方热门图标 -->
          <div class="hot-banner">
            <a
              v-for="(item, i) in hotBanner"
              :key="i"
              @click="clickHotBanner(item)"
            >
              <img :src="item.picUrl" />
              <p class="tit">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerMooc",
  data() {
    return {
      backgroundImage: "",
      showSubMenu: false,
      catName: "",
      secondCat: [],
      catRecommend: [],
      currCat: "",
    };
  },
  computed: {
    styleObject: function () {
      return {
        "--color": this.color,
      };
    },
  },
  props: {
    // 开启背景模糊
    bk: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "#F20D0D",
    },
    bannerData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    hotBanner: {
      type: Array,
      default: function () {
        return [];
      },
    },
    categoryData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    changeBanner(v) {
      v += 1;
      if (v == this.bannerData.length) {
        v = 0;
      }
      this.backgroundImage =
        "background-image: url('" + this.bannerData[v].picUrl + "')";
    },
    handleShowSub(show, v) {
      if (show) {
        this.currCat = this.catName = v.title;
        this.secondCat = v.children;
        this.catRecommend = v.recommend;
        this.showSubMenu = true;
      } else {
        this.currCat = "";
        this.showSubMenu = false;
      }
    },
    handleShowSubPanel(show) {
      if (show) {
        this.currCat = this.catName;
        this.showSubMenu = true;
      } else {
        this.currCat = "";
        this.showSubMenu = false;
      }
    },
    clickBanner(index) {
      this.$emit("on-click-banner", this.bannerData[index]);
    },
    clickHotBanner(v) {
      this.$emit("on-click-hot-banner", v);
    },
    clickCategory(v) {
      this.$emit("on-click-category", v);
    },
    clickProduct(v) {
      this.$emit("on-click-product", v);
    },
  },
  mounted() {},
};
</script>
